<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<input type="text" id="i1">
<input type="button" value="js" id="b1">
<input type="button" value="jq" id="b2">
<!--引入jq框架-->
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script>
    //jq中动态给元素添加事件
    $("#b1").click(function () {
        //得到的是js对象 表示文本框
        //let i=document.querySelector("#i1");
        //alert(i.value)

        //得到的是jq对象 表示文本框
        //let i=$("#i1");
        //alert(i.val());

        //js对象和jq对象时两种不同的对象,不能混着调用彼此的方法

        //得到js对象
        let js=document.querySelector("#i1");
        //将js对象转成jq对象
        let jq=$(js);
        alert(jq.val());
    })
        //添加事件
        $("#b2").click(function () {
            //得到jq对象
            let jq=$("#i1");
            //把jq对象转成js对象,jq对象本质是一个数组,数组里面装的就是js对象
            let js=jq[0];
            alert(js.value)

    })
</script>
</body>
</html>